let template =
`
<div class="startapp">
  <h3>templates</h3>
  <div>{{curkey}}</div>

  <div class="ui-flex">
    <div class="startapp-row">
      <div class="ui-flex">
        <template v-for="(item, key) in templates">
          <el-button
            :active="key === curkey"
            class="startapp-button"
            size="small"
            v-bind="item.attrs"
            @click="run(item, key)"
          >{{key}}</el-button>
        </template>
      </div>
      <h3>file</h3>
      <input type="file" @input="onInput" />
      <div>
      <div style="height: 20px"></div>
      <el-button size="small" @click="onSubmit">确定</el-button>
      </div>
    </div>
    <div class="startapp-preview"><div v-show="curkey" class="startapp_preview_code" id="startapp_preview_code"></div></div>
  </div>
</div>
`

import {renderAceEditor} from '../ace'

export default function () {
  let mix = {
    data() {
      return {
        curkey: ''
      }
    }
  }
  window.vvg.startApp = new Vue({
    el: '#startapp',
    template,
    data() {
      return {
        ...mix.data(),
        blocks: Object.keys(window.vvg.blocks),
        elements: window.vvg.elements,
        templates: window.vvg.templates,
      }
    },
    mounted() {
      renderAceEditor('startapp_preview_code', '')
    },
    methods: {
      run(item, key) {
        this.curkey = key
        window.vvg.toggleLoading(true)
        let serverPath = window.vvg.serverPath
        let tpl = item.getTpl(serverPath)
        vvg.tpl = tpl
        vvg.pageEditors.update('template', vvg.tpl)
        window.vvg.toggleLoading(false)
        renderAceEditor('startapp_preview_code', vvg.tpl)
      },
      onInput(e) {
        if (e.target.files) {
          window.vvg.files = e.target.files
          window.vvg.curFile = e.target.files[0]
        }
      },
      onSubmit() {
        if (!window.vvg.curFile) {
          window.XyMessage.error('没有选择文件')
          return
        }
        if (!window.vvg.tpl) {
          window.XyMessage.error('没有选择模板')
          return
        }
        window.MoveTest.addBlockNode(0)
        appStartModal.style.display = 'none'
      }
    }
  })
}
